<template>
    <div class="selectColorOptionRoot">
        <el-icon :size="21">
            <ArrowRight />
        </el-icon>
    </div>
    <div class="ColorOption" @click.stop="StopClick">
        <OptionView @userOk="userOk" :destroyOnClose="true" title="主题色选择" ref="OptionViewRef" @quit="ColorOption_ctrl">
            <el-tag style="margin-right: 8px;color:white;font-weight: bolder;" @click="setColorTheme(index)"  v-for="(ColorItem,index) in global_Object.$colorThemes.color_themes" :color="ColorItem.color"  size="large" >
                {{ ColorItem.showName }}
            </el-tag>
        </OptionView>
    </div>
</template>
<script setup>
import { onMounted, ref, watch, reactive,getCurrentInstance } from "vue"
import store from "@/store/store";

// 设置界面
import OptionView from "@/components/OptionView/OptionView.vue";

let global_Object = getCurrentInstance().appContext.config.globalProperties

let emit = defineEmits(['open', 'colse'])

//  此函数为阻止事件冒泡，什么都不用写
function StopClick() { }

// 控制设置界面显示的变量
let ColorOption = reactive({ value: false })
// 开关ColorOption的函数
function ColorOption_ctrl(ctrl = false) {
    if (ctrl) {
        emit('open')
        ColorOption.value = true;
    } else {
        emit('colse')
        ColorOption.value = false;
    }
}

// 点击颜色标签执行的函数
function setColorTheme(index){
    global_Object.$colorThemes.setColorTheme(index);
    store.commit("setThemeColor",global_Object.$colorThemes.color_themes[index].name)
}


// 暴露变量和方法
defineExpose({
    ColorOption, ColorOption_ctrl
})

let OptionViewRef = ref(null); //设置界面的Ref

//设置界面的显示
onMounted(() => {
    OptionViewRef.value['OptionVisible'].value = ColorOption.value;
    watch(ColorOption, (newValue) => {
        OptionViewRef.value['OptionVisible'].value = newValue.value;
    })
})

// 用户点击确定
function userOk(){
    ColorOption.value = false;
}
</script>
<style scoped>
.ColorOption {
    pointer-events: auto;
}

.selectColorOptionRoot {
    width: 100%;
    height: 100%;
    text-align: right;
}
</style>